$primary-color: #409EFF;
$primary-background-color: #ecf5ff;

#ui-editor {
  height: 100%;
  background-color: #fff;
  .ivu-layout-header, .ivu-layout-sider, .ivu-layout {
    background-color: #fff;
  }
  .ivu-tabs-nav {
    height: 46px;
    line-height: 30px;
  }
}

.zlst-list {
  &--inline {
    padding: 8px 0;
    width: 100%;
    height: 100%;
    h3 {
      color: #333;
      padding: 8px 12px;
      font-weight: normal;
      font-size: 13px;
    }
    ul {
      position: relative;
      overflow: hidden;
      padding: 0 10px 10px;
      margin: 0;
    }
    li {
      font-size: 12px;
      display: block;
      width: 48%;
      line-height: 26px;
      position: relative;
      float: left;
      left: 0;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      margin: 1%;
      color: #333;
      border: 1px solid #F4F6FC;

      &:hover {
        color: $primary-color;
        border: 1px dashed $primary-color;
      }

      & > a {
        display: block;
        color: #333;
        cursor: move;
        background: #F4F6FC;
        border: 1px solid #F4F6FC;
        &:hover {
          color: $primary-color;
        }

        .icon {
          margin-right: 6px;
          margin-left: 8px;
          font-size: 14px;
          display: inline-block;
          vertical-align: middle;
        }

        span {
          display: inline-block;
          vertical-align: middle;
        }
      }
    }
  }
  &--space {
    li {
      list-style-type: none;
      > * {
        margin-right: 5px;
      }
    }
  }
}

.widget-empty {
  background: url('../../assets//images/form_empty.png') no-repeat;
  background-position: 50%;
}

.zlst-form {
  &--editor {
    display: flex;
    width: 100%;
    height: 100%;
    > .ivu-layout {
      border-left: 1px solid #e0e0e0;
      border-right: 1px solid #e0e0e0;
      > .ivu-layout-header {
        border-bottom: 1px solid #e0e0e0;
      }
    }
    .zlst-ui-item-wrapper {
      padding: 5px 10px 18px;
      margin: 0;
      position: relative;
      border-left: 5px solid transparent;

      &:hover {
        background: $primary-background-color;
        border-left: 5px solid $primary-background-color;
      }

      &.is-active {
        border-left: 5px solid $primary-color;
        background: #b3d8ff;
        > .ivu-btn {
          display: block;
        }
        > .ivu-form-item-content {
          > .ivu-btn {
            display: block;
          }
        }
      }
      &.is-required {
        .ivu-form-item::before{
          content: '*';
          color: #f56c6c;
          margin-right: 4px;
        }
      }

      .ivu-btn {
        display: none;
        &[role="copy"], &[role="delete"] {
          position: absolute;
          bottom: -35px;
          z-index: 999;
        }
        &[role="copy"] {
          right: 70px;
        }
        &[role="delete"] {
          right: 25px;
        }
        .ivu-icon {
          font-size: 22px;
          line-height: 1.3;
        }
      }
    }

    .zlst-form-container {
      height: 100%;
      padding-bottom: 150px;
      .ivu-row {
        padding: 5px 5px 18px;
      }
      .zlst-col--placeholder {
        border: 1px dashed #999;
        padding-bottom: 50px;
      }
    }
  }

  &--topline {
    padding: 10px;
    .ivu-form-item-label {
      font-size: 14px;
    }

    .ivu-form-item:not(:first-of-type) {
      padding-top: 10px;
      border-top: 1px solid #e1e1e1;
    }
  }
}

.moveable {
  cursor: move;
}
